import { Canvas } from "@react-three/fiber";
import { Experience } from "./components/Experience";
import {SocketManager} from './components/SocketManager.jsx'
import {UI} from './components/UI.jsx'
import {ScrollControls} from '@react-three/drei'

export const CAMERA_SIZE = 8

function App() {
  return (
    <>
      <SocketManager />
      <Canvas shadows camera={{ position: [CAMERA_SIZE, CAMERA_SIZE, CAMERA_SIZE], fov: 30 }}>
        <color attach="background" args={["#ececec"]} />
        {/* 添加3D鼠标滚轮，可以鼠标滚动查看商店物品 */}
        <ScrollControls pages={4}>
          <Experience />
        </ScrollControls>
      </Canvas>
      <UI />
    </>
  );
}

export default App;
